<template>
  <view class="list">
    <view class="flxbg" :style="'background: url('+ playlist.coverImgUrl +') no-repeat center top;'"></view>
    <music-head :show="true" title="歌单" color="white"/>
    <view class="container" v-show="!isLoading">
      <scroll-view scroll-y="true">
        <view class="list-head">
          <view class="list-info-content">
            <view class="list-head-img">
              <image :src="playlist.coverImgUrl"></image>
              <text class="iconfont icon-yousanjiao">{{ playlist.playCount | formatCount }}</text>
            </view>
            <view class="list-head-text">
              <view class="list-head-name">{{ playlist.name }}</view>
              <view class="list-head-title">
                <image :src="playlist.creator.avatarUrl"></image>
                <text>{{ playlist.creator.nickname }}</text>
              </view>
              <view class="list-head-info">{{ playlist.description }}<text class="iconfont icon-xiangyou1"></text></view>
            </view>
          </view>
          <!-- #ifdef MP-WEIXIN -->
            <!-- <view class="list-head-share">
              <text class="iconfont icon-fenxiang"></text>
              分享给微信好友
            </view> -->
            <button open-type="share" class="list-head-share">
              <text class="iconfont icon-fenxiang"></text>
              分享给微信好友
            </button>
          <!-- #endif -->
        </view>
        <view class="list-music">
          <view class="list-music-head">
            <text class="iconfont icon-bofang"></text>
            <text class="list-all">播放全部</text>
            <text class="list-num">(共{{ playlist.trackCount }}首)</text>
          </view>
          <view
            class="list-music-item"
            v-for="(item, index) in playlist.tracks"
            :key="index"
            @tap="handleToDetail(item.id)"
          >
            <text class="list-item-num">{{ index + 1 }}</text>
            <view class="list-item-info">
              <view class="list-item-title">{{ item.name }}</view>
              <view class="list-item-belong"><text v-if="privileges[index].maxbr === 999000"></text>{{ item.ar[0].name }} - {{ item.al.name }}</view>
            </view>
            <text class="iconfont icon-24gl-playCircle list-item-play"></text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import musicHead from '@/components/musicHead/musicHead.vue'
  import { rankList } from '@/common/api.js'
  export default {
    name: "ListIndex",
    data() {
      return {
        isLoading: true,
        playlist: {
          coverImgUrl: '',
          creator: {
            avatarUrl: '',
            nickname: ''
          },
          description: '',
          name: '',
          trackCount: '',
          tracks: []
        },
        privileges: [],
        isLoading: true
      }
    },
    components: {
      musicHead
    },
    onLoad (options) {
      uni.showLoading({
        title: '加载中...'
      })
      this.isLoading = true
      rankList(options.id).then(res => {
        if (res.data.code === 200) {
          this.playlist = res.data.playlist
          this.privileges = res.data.privileges
          this.$store.commit('INIT_TOPLISTIDS', res.data.playlist.trackIds)
          uni.hideLoading()
          this.isLoading = false
        }
      })
    },
    methods: {
      handleToDetail (id) {
        uni.navigateTo({
          url: '/pages/detail/detail?id=' + id
        })
      }
    }
  }
</script>

<style scoped>
  .list-head {
    padding: 36upx 40upx 40upx 32upx;
  }
  .list-info-content {
    display: flex;
    margin-bottom: 46upx;
  }
  .list-head-img {
    position: relative;
    width: 262upx;
    height: 262upx;
    margin-right: 44upx;
  }
  .list-head-img image {
    width: 262upx;
    height: 262upx;
    border-radius: 20upx;
  }
  .list-head-img text {
    position: absolute;
    top: 6upx;
    right: 10upx;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 26upx;
  }
  .list-head-img text::before {
    font-size: 18upx;
    margin-right: 4upx;
  }
  .list-head-text {
    flex: 1;
    max-width: 372upx;
  }
  .list-head-name {
    color: #fff;
    font-size: 32upx;
    line-height: 48upx;
  }
  .list-head-title {
    display: flex;
    align-items: center;
    height: 54upx;
    margin: 22upx auto;
    color: #dbe4f0;
  }
  .list-head-title image {
    width: 54upx;
    height: 54upx;
    border-radius: 50%;
    margin-right: 14upx;
  }
  .list-head-title text {
    color: #fff;
    font-size: 25upx;
  }
  .list-head-info {
    color: #b8cae1;
    font-size: 20upx;
    line-height: 32upx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .list-head-info text {
    font-size: 20upx;
    vertical-align: middle;
  }
  .list-head-share {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 330upx;
    height: 70upx;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 26upx;
    border-radius: 70upx;
    margin: 0 auto;
  }
  .list-head-share text {
    font-size: 28upx;
    margin-right: 10upx;
  }
  
  .list-music {
    background: #fff;
    border-radius: 30upx;
    padding: 0 32upx 20upx 32upx;
    box-sizing: border-box;
  }
  .list-music-head {
    display: flex;
    align-items: center;
    height: 106upx;
    color: #333;
    margin-bottom: 5upx;
  }
  .list-music-head .iconfont {
    font-size: 40upx;
    margin-right: 28upx;
    font-weight: 700;
  }
  .list-music-head .list-all {
    font-size: 30upx;
    font-weight: 600;
  }
  .list-music-head .list-num {
    font-size: 24upx;
    color: #b3b3b3;
    margin-left: 8upx;
  }
  .list-music-item {
    display: flex;
    height: 64upx;
    margin: 30upx 0;
  }
  .list-item-num {
    width: 60upx;
    margin-right: 14upx;
    padding: 10upx 0 0 12upx;
    box-sizing: border-box;
    font-size: 24upx;
    color: #999;
  }
  .list-item-info {
    flex: 1;
  }
  .list-item-title {
    width: 500upx;
    font-size: 28upx;
    color: #333;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .list-item-belong {
    display: flex;
    align-items: center;
    width: 500upx;
    font-size: 24upx;
    color: #999;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .list-item-belong text {
    width: 28upx;
    height: 18upx;
    background: url("../../static/images/sq.png") no-repeat center center;
    background-size: cover;
    margin-right: 8upx;
  }
  .list-item-play {
    font-size: 50upx;
    color: #ccc;
  }
</style>
